<template>
  <div
    id="form-config"
    :style="draggedStyle"
    class="wrap"
    ref="formItemConfigCard"
    @dblclick="onDBClick"
    title="双击空白区域重置对话框位置"
  >
    <v-card class="border no-shadow no-select h525" title="表单项配置">
      <v-card-text>
        <v-form v-if="selectedItem">
          <v-text-field
            label="名称"
            v-model.trim="selectedItem.label"
            clearable
          ></v-text-field>
          <v-text-field
            label="取值字段"
            v-model.trim="selectedItem.field"
            placeholder="为空则自动生成，示例：prop1"
            clearable
            validate-on="submit"
          ></v-text-field>
          <v-select
            :items="options"
            v-model="selectedItem.required"
            label="是否必填"
          ></v-select>
          <v-select
            :items="[6, 8, 12, 24]"
            v-model="selectedItem.span"
            label="占据空间"
          ></v-select>
          <v-select
            :items="workspace.components"
            v-model="selectedItem.component"
            item-props=""
            item-title="name"
            item-value="id"
            label="组件"
          >
          </v-select>
          <v-select
            :items="workspace.regExps"
            v-model="selectedItem.regExps"
            item-title="name"
            item-value="id"
            clearable
            label="正则验证"
            multiple
          ></v-select>
          <v-select
            :items="workspace.validators"
            v-model="selectedItem.validators"
            item-title="name"
            item-value="id"
            label="函数验证"
            clearable
            multiple
          ></v-select>
        </v-form>
      </v-card-text>
    </v-card>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect, onMounted } from "vue";
import { useDraggable } from "@vueuse/core";
import { useWorkspace, useFormItems } from "@/features";

const { workspace } = useWorkspace();
const { selectedItem } = useFormItems();

const options = [
  {
    title: "是",
    value: true,
  },
  {
    title: "否",
    value: false,
  },
];

const formItemConfigCard = ref<HTMLDivElement | null>(null);
const draggedStyle = ref("");

function getInitialPosition() {
  const appEl = document.getElementById("app");
  const cardEl = formItemConfigCard.value!;
  // 操作区域的offsetLeft
  const v1 = (appEl!.firstElementChild as HTMLElement).offsetLeft;
  const pw = cardEl.parentElement!.offsetWidth;
  // 操作区域宽度
  const v2 = 1200 - pw;
  return {
    // 4 -> 4个1px的边框
    // 操作区域和表单项配置都各有2个1px的边框
    x: v1 + v2 + (pw - 360) / 2 - 4,
    y: 265,
  };
}

function resetPosition() {
  const { x, y } = getInitialPosition();
  draggedStyle.value = `top:${y}px; left:${x}px`;
}

function onDBClick(e: MouseEvent) {
  let target = e.target as HTMLElement;
  while (target && target.id !== "form-config") {
    if (target.classList.contains("v-input__control")) {
      return;
    }
    target = target.parentElement!;
  }
  resetPosition();
}

function initDrag() {
  const cardEl = formItemConfigCard.value!;
  const handle = cardEl.querySelector(".v-card-title") as HTMLElement;
  const { style } = useDraggable(formItemConfigCard, {
    handle,
    initialValue: getInitialPosition(),
  });
  watchEffect(() => (draggedStyle.value = style.value));
}

onMounted(initDrag);
window.addEventListener("resize", resetPosition);
</script>

<style lang="scss" scoped>
.wrap {
  position: absolute;
  z-index: 999;
  width: 360px;
  // animation: move 600ms ease 1s;

  :deep(.v-card-title) {
    cursor: move;
  }
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(50px);
  }
}

.h525 {
  height: 525px !important;
}
</style>
